<template>
  <div class="rerent page flex-col">
    <div class="order-item flex-col bg-white">
      <div class="title items-center">
        <img :src="info.storeLogo" alt="" class="logo" mode="aspectFit" />
        <span class="store-name">{{ info.storeName }}</span>
        <span class="phone" @tap="phone(info.storeTelphone, 'store')"
          ><img src="../../static/icones/orderlist23.png" />联系商家</span
        >
      </div>
      <div class="content flex">
        <div class="left justify-center items-center">
          <img :src="info.coverUrl" alt="" class="pic" mode="aspectFit" />
        </div>
        <div class="right flex-col">
          <p class="goods-title ellipsis_1">{{ info.goodsName }}</p>
          <div class="spec flex">
            <span class="name">套餐：</span>{{ info.specName }}
          </div>
          <div class="rang-date spec flex">
            <span class="name">租期：</span>{{ info.startEndTimeString }}
            <span class="num spec">X{{ info.num }}</span>
          </div>
          <div class="all-rang items-center flex">
            <span class="name">总租金：</span>￥<span class="rangnum">{{
              info.allRentFee || 0
            }}</span
            >（{{ info.rentStage }}期）
          </div>
        </div>
      </div>
    </div>
    <div class="flex-col info bg-white">
      <div class="title">选择续租周期</div>
      <div class="content flex-col">
        <div class="rent-day flex">
          <span
            class="item"
            :class="{ selectItem: index === currentDay }"
            v-for="(day, index) in rentDays"
            :key="`day${index}`"
            @tap="currentDay = index"
            >{{ day.day }}天</span
          >
          <input
            type="number"
            class="item"
            :class="{ selectItem: currentDay === -1 }"
            placeholder="自定义"
            v-model.trim.number="diyDate"
            @focus="currentDay = -1"
            @blur="
              diyDate = diyDate > rentDays[0].day ? diyDate : rentDays[0].day
            "
          />
        </div>
        <!-- <div class="preview-days flex">
          <div class="item flex">
            <img
              src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/order/begin-days.png"
              alt=""
              class="icon"
            />
            <div class="flex-col day-info">
              <span class="name">预计起租日</span>
              <span class="date">{{ stateDate }}</span>
            </div>
          </div>
          <div class="item flex">
            <img
              src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/order/end-days.png"
              alt=""
              class="icon"
            />
            <div class="flex-col day-info">
              <span class="name">归还日</span>
              <span class="date">{{ endDate }}</span>
            </div>
          </div>
        </div> -->
        <div class="rent-money items-center">
          <span class="name">总租金</span>
          <span class="value">￥{{ allRent }}<span>(12期)</span></span>
        </div>
      </div>
    </div>
    <div class="btn" @tap="saveData">确定提交</div>
  </div>
</template>

<script>
import { getorderXu } from "../../config/api";
export default {
  data() {
    return {
      id: "",
      info: {},
      // goodsInfo: {},
      days: [1, 3, 7, 30, 60, 90, 180, 360, 720, 1080],
      diyDate: "",
      currentDay: 0,
      stateDate: "",
    };
  },
  computed: {
    specItem() {
      return this.info.orderSpecDTO || {};
      // return (this.info.orderSpecDTO || []).find(item => item.specName === this.info.specName) || {}
    },
    rentDays() {
      // 租期
      let rentDays = [];
      this.days.forEach((day) => {
        if (this.specItem[`rent${day}day`]) {
          rentDays.push({
            day: day,
            value: this.specItem[`rent${day}day`],
          });
        }
      });
      return rentDays;
    },
    monthRent() {
      // 月租
      let index = this.currentDay;
      if (index < 0) {
        if (this.diyDate < this.rentDays[0].day) {
          index = 0;
        } else {
          index = this.rentDays.findIndex(
            (item, idx) =>
              this.diyDate >= item.day &&
              (this.rentDays[idx + 1]
                ? this.diyDate < this.rentDays[idx + 1].day
                : true)
          );
        }
      }
      return (this.rentDays[index].value * 30 * this.info.num).toFixed(2);
    },
    allRent() {
      // 总租
      if (!this.rentDays.length) {
        return "";
      }
      let index = this.currentDay;
      if (index < 0) {
        if (this.diyDate < this.rentDays[0].day) {
          index = 0;
        } else {
          index = this.rentDays.findIndex(
            (item, idx) =>
              this.diyDate >= item.day &&
              (this.rentDays[idx + 1]
                ? this.diyDate < this.rentDays[idx + 1].day
                : true)
          );
        }
      }
      return (
        this.rentDays[index].value *
        (this.currentDay >= 0 ? this.rentDays[index].day : this.diyDate) *
        this.info.num
      ).toFixed(2);
    },
    endDate() {
      // if (this.rentDays.length) {
      //   const days =
      //     this.currentDay > -1
      //       ? this.rentDays[this.currentDay].day
      //       : this.diyDate || this.rentDays[0].day;
      //   return this.$utils.getDate(
      //     this.info.startTime,
      //     this.info.rentDay + days + 1
      //   );
      // }
      // return "--";
    },
  },
  mounted() {
    // const { id } = this.$query();
    // if (id) {
    //   this.id = id;
    // }
    this.getData();
  },
  methods: {
    async getData() {
      // this.$api.getOrderDetail(this.id || OrderAction.getId()).then((data) => {
      //   this.info = data;
      //   // console.log(this.$query());
      //   // console.log(this.info);
      //   // this.getGoodsDetail()
      //   this.stateDate = this.$utils.getDate(data.startTime, data.rentDay);
      // });
      const res = await getorderXu({
        orderId: 49853,
        sessionId: "c22eeb72a2abdc87a2e8b2c6865d230d_61985",
      });
      console.log(res, "44");
      this.info = res.data.orderDetailDTO;
    },
    // getGoodsDetail () {
    //   this.$http.request({
    //     url: '/index/goodsDetail.json',
    //     data: {
    //       goodsId: this.info.goodsId
    //     }
    //   }).then(({ data: { goodsDetailDTO } }) => {
    //     this.goodsInfo = goodsDetailDTO
    //   })
    // },
    phone(phone, type) {
      OrderAction.phone(phone, type);
    },
    saveData() {
      const params = {
        orderId: this.id || OrderAction.getId(),
        rentDay:
          this.currentDay >= 0
            ? this.rentDays[this.currentDay].day
            : this.diyDate,
      };
      this.$http
        .request({
          url: "/order/renewContractOrder.json",
          data: params,
        })
        .then(
          ({
            data: {
              renewContractOrder: { id },
            },
          }) => {
            this.$toast("支付中", "loading");
            OrderAction.pay(id, 2).then(() => {
              setTimeout(() => {
                this.$back();
              }, 1500);
            });
          }
        );
    },
  },
};
</script>
<style lang="scss">
.rerent {
  background-color: #f5f5f5;
  padding: 0 12px;
  .order-item {
    width: 100%;
    min-height: 160px;
    margin-top: 12px;
    .title {
      height: 45px;
      width: 100%;
      padding: 0 15px;
      border-bottom: 1px solid #f5f5f5;
      .logo {
        width: 18px;
        height: 18px;
        border-radius: 50%;
      }
      .store-name {
        color: #000000;
        font-size: 14px;
        margin-left: 4px;
        line-height: 20px;
      }
      .phone {
        // background-color: #0096ff;
        width: 90px;
        height: 22px;
        text-align: center;
        font-size: 14px;
        line-height: 22px;
        color: #3d3d3d;
        font-family: PingFang SC Bold;
        margin-left: auto;
        display: flex;
        img {
          width: 21px;
          height: 21px;
          margin-right: 6px;
        }
      }
    }
    .content {
      padding: 10px 12.5px;
      width: 100%;
      min-height: 100px;
      .left {
        width: 82px;
        height: 82px;
        background-color: #f9f9f9;
        .pic {
          width: 82px;
          height: 82px;
        }
      }
      .right {
        margin-left: 12px;
        width: 70%;
        .goods-title {
          color: #3d3d3d;
          font-size: 14px;
          max-width: 210px;
          font-family: PingFang SC Bold;
          line-height: 20px;
        }
        .spec {
          color: #9d9d99;
          font-size: 12px;
          line-height: 17px;
          margin-top: 6px;
          font-family: PingFang SC Medium;
          .name {
            width: 40px;
          }
        }
        .rang-date {
          display: flex;
          align-items: center;
          .num {
            margin-left: auto;
          }
        }
        .all-rang {
          min-width: 210px;
          color: #3d3d3d;
          font-family: PingFang SC Medium;
          font-size: 14px;
          font-weight: normal;
          line-height: 20px;
          margin-top: 6px;
          display: flex;
          justify-content: flex-end;
          .rangnum {
            font-family: DINPro-Bold;
            font-size: 18px;
            font-weight: bold;
            line-height: 21px;
            letter-spacing: 0em;
          }
        }
      }
    }
  }

  .info {
    width: 100%;
    min-height: 192px;
    margin-top: 12px;
    .title {
      height: 50px;
      line-height: 52px;
      border-bottom: 1px solid #f5f5f5;
      color: #333333;
      font-weight: bold;
      font-size: 16px;
      margin-left: 16px;
    }
    .content {
      padding: 0 13px;
      .rent-day {
        flex-wrap: wrap;
        .item {
          width: 76px;
          height: 30px;
          line-height: 32px;
          text-align: center;
          margin-right: 10px;
          border-radius: 15px;
          background-color: #f5f5f5;
          margin-bottom: 10px;
          color: #555555;
          font-size: 14px;
          &.selectItem {
            background-color: #eef8ff;
            border: 1px solid #0096ff;
            color: #0096ff;
          }
          &:nth-child(4n) {
            margin-right: 0;
          }
        }
      }
      .preview-days {
        width: 331px;
        height: 47px;
        border-radius: 8px;
        background-color: #f4faff;
        margin-top: 14px;
        .item {
          flex: 1;
          padding: 8.5px 0 8.5px 21px;
          height: 100%;
          .icon {
            width: 30px;
            height: 30px;
            margin-right: 6px;
          }
          .day-info {
            .name {
              color: #333333;
              font-size: 14px;
              line-height: 20px;
            }
            .date {
              line-height: 17px;
              color: #555555;
              font-size: 12px;
            }
          }
        }
      }

      .rent-money {
        margin-top: 12px;
        width: 100%;
        padding: 0 14px;
        height: 43px;
        .name {
          color: #333333;
          font-weight: bold;
          font-size: 14px;
        }
        .value {
          margin-left: auto;
          color: #333333;
          font-size: 12px;
          line-height: 17px;
        }
      }
    }
  }

  .btn {
    width: 92%;
    height: 40px;
    line-height: 42px;
    text-align: center;
    border-radius: 20px;
    background-color: #0096ff;
    color: #fff;
    font-size: 16px;
    position: fixed;
    bottom: 50px;
    left: 15px;
  }
}
</style>
